<template>
  <view class="definite">
    <u-navbar :is-back="true" title="身份认证" back-text="">
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <view style="padding: 0rem 0.5rem; display: flex; align-items: center">
          <!-- <view style="
font-size: 0.75rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;" >员工规则</view> -->

          <!-- <image style="width: 0.7rem;
height: 0.5rem;
padding: 0.3rem;" src="../../../style/image/my/bottomArrow.jpg" alt=""> -->
        </view>
      </view>
    </u-navbar>
    <view class="item">
      <div class="item-one">账号姓名</div>
      <span>
        <input
          v-model="realName"
          class="item-two"
          type="text"
          placeholder="请输入您的真实姓名"
        />
      </span>
    </view>
    <!-- <view class="item">
      <div class="item-one">手机号</div>
      <span>
        <input
          v-model="blackNum"
          class="item-two"
          type="text"
          placeholder="请输入您的手机号"
        />
      </span>
    </view> -->

    <view class="item">
      <div class="item-one">身份证号</div>
      <span>
        <input
          v-model="card"
          class="item-two"
          type="text"
          placeholder="请输入您的身份证号"
        />
      </span>
    </view>
    <view class="item">
      <div class="item-one">验证码</div>
      <span style="display: flex; justify-content: space-between">
        <input
          v-model="verifyCode"
          class="item-three"
          type="text"
          placeholder="默认当前登陆手机号"
        />
        <span class="wrap">
          <!-- <u-toast ref="uToast"></u-toast>
          <u-verification-code
            :seconds="seconds"
            @end="end"
            @start="start"
            ref="uCode"
            @change="codeChange"
          ></u-verification-code>
          <u-button @tap="getCode">{{tips}}</u-button> -->
          <view
            v-if="canClick"
            @click="sendNum"
            :style="{ color: '#41c396', width: '5rem', textAlign: 'center' }"
            >获取验证码</view
          >

          <u-count-down
            @end="endM"
            :style="{
              color: '#41c396',
              width: '5rem',
              display: 'flex',
              justifyContent: 'center',
            }"
            v-else
            ref="uCountDown"
            :show-hours="false"
            :timestamp="60"
          ></u-count-down>
        </span>
      </span>
    </view>
    <view class="item-four">请谨慎填写您的真实姓名，否则无法完成后续交易</view>
    <view class="footP">
      <view
        @click="submitM"
        style="padding: 0.7rem; display: flex; align-items: center"
      >
        <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <view style="color: white; margin-left: 0.2rem">提交</view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import { AppModule } from "../../store/modules/app";

import { bindingZfb, sendMsgCDB, bindingIdentity } from "../../utils/uniApi";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public seconds = "";

  public tips = "qqwe";

  public canClick = true;

  public recCode = ""; //推荐吗

  public realName = ""; //姓名、
  public blackNum = ""; //手机号
  public card = ""; //			身份证
  public verifyCode = ""; //				验证码

  public info: any = "";

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑

    console.log(AppModule.idenifyInfo);
    this.info = AppModule.idenifyInfo;

    this.realName = this.info.realName; //姓名
    this.card = this.info.card;
  }

  codeChange() {}
  sendNum() {
    if (this.canClick == true) {
      console.log("发送验证码");

      console.log(uni.getStorageSync("otherData").phone, "用户信息");

      var params = {
        recCode: "", // 推荐码(注册时必传，其他非必传)
        phone: uni.getStorageSync("otherData").phone, // 手机号
        type: "bindingIdentity", //发送验证码场景 （register：注册 pwd：修改密码  drawMoney：提现   bindingZfb：绑定支付宝  bindingIdentity：绑定身份证）
      };

      sendMsgCDB(params).then((res: any) => {
        // console.log(6)
        (this.$refs.uToast as any).show({
          title: res.data.message,
          type: "primary",
        });
      });

      this.canClick = false;
    } else {
      this.canClick = true;
    }
  }

  submitM() {
    let params = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
      realName: this.realName, //姓名
      card: this.card, //			身份
      verifyCode: this.verifyCode, //				验证码
    };

    bindingIdentity(params).then((res: any) => {
      console.log(res, "reszhi付宝");

      uni.showToast({
        title: res.data.message,
        icon: "none",
        duration: 2000,
      });
    });
  }

  endM() {
    console.log("倒计时结束");
    this.canClick = true;
  }
}
</script>

<style  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.item {
  display: flex;
  align-items: center;
  margin: 0.8rem 0.5rem 0 0.5rem;
  padding: 1rem 0.7rem;
  background: #ffffff;
  border-radius: 0.3rem;
}
.item-one {
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  width: 4rem;
}
.item-two {
  /* width: 13rem; */
  padding-left: 1rem;
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #999999;
}
.item-three {
  width: 7rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #999999;
}
.item-four {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #999999;
}
.button {
  margin-top: 13.34rem;
  font-size: 0.8rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ffffff;
  line-height: 2.5rem;
  height: 2.5rem;
  background: #02af74;
  border-radius: 0;
}
.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>